<template>
    <div class="collect-info">
        <h2>{{info.title}}</h2>
        <div class="item-group">
            <div class="item">
                <span>开始时间</span>
                <el-date-picker
                    v-model="info.startTimer"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="item">
                <span>全天活动</span>
                <el-switch
                    v-model="info.open"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </div>
        </div>

        <div class="item-group">
            <div class="item">
                <span>{{info.address}}</span>
            </div>
            <div class="item">
                <span>提醒时间</span>
                <el-time-select
                    v-model="info.tipTimer"
                    :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }"
                    placeholder="选择时间">
                </el-time-select>
            </div>
        </div>

        <el-collapse>
            <el-collapse-item title="更多选项">
                <div class="item-group">
                    <div class="item">
                        <span>结束时间</span>
                        <el-date-picker
                            v-model="info.endTimer"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <span>省市区</span>
                        <el-cascader
                            :options="options"
                            v-model="info.area">
                        </el-cascader>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-button type="danger" round @click="save">保存</el-button>
    </div>
</template>
<script>

export default {
    data() {
      return {
            info:{
                title:'网站工程学院考试',
                address:'八维网站工程学院',
                startTimer:'',//开始时间
                endTimer:'',  //结束时间
                open:true,    //是否全天
                tipTimer:'',  //提醒时间
                area: []      //选择省市区
            },
            options: [
                {
                    value: '河北省',
                    label: '河北省',
                    children: [{
                        value: '裕华区',
                        label: '石家庄',
                        children: [{
                            value: '桥西区',
                            label: '裕华区'
                            }, {
                            value: '桥西区',
                            label: '桥西区'
                            }
                        ]
                    }]
                }
            ]
        };
    },
    methods:{
        save(){
            localStorage.setItem('info',JSON.stringify(this.info));
        }
    }
}
</script>

<style lang="scss">
    .collect-info{
        width:100%;
        height:100%;
        overflow: hidden;
        background: #eee;
        h2{
            font-size:14px;
            margin:15px;
        }
        .item-group{
            background: #fff;
            margin-bottom:10px;
            .item{
                width:100%;
                height:40px;
                line-height: 40px;
                padding:0 15px;
                display: flex;
                justify-content:space-between;
                align-items: center;
                position: relative;
            }    
        }   
        
    }    
</style>

